<template>
  <a-tree :tree-data="treeData" :fieldNames="fieldNames" :selectable="false">
    <template #title="{ newName, id, enName, name }">
      <div>
        <span>{{ newName }}</span>
        <delete-outlined class="ml10" style="color:rgb(24, 144, 255)" @click="onDelete(name, id)" />
        <edit-outlined class="ml10" style="color:rgb(24, 144, 255)" @click="onEdit(name, id)" />
        <copy-outlined class="ml10" style="color:rgb(24, 144, 255)" @click="copyText(enName)" />
      </div>
    </template>
  </a-tree>
  <a-modal v-model:visible="showEdit" title="修改" @ok="onSubmit">
    <a-input v-model:value="editName"></a-input>
  </a-modal>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Modal } from 'ant-design-vue';
import { copyText } from '@u/tools'
import { getSheinTypeTree, delSheinType, updateSheinType } from '@r/api/productType'
import {
  DeleteOutlined,
  EditOutlined,
  CopyOutlined
} from '@ant-design/icons-vue';
const treeData = ref([])
const showEdit = ref(false)
const editId = ref('')
const editName = ref('')
const fieldNames = { children: 'sons', title: 'newName', key: 'id' }
function onDelete(name, key) {
  console.log(name, key);
  Modal.confirm({
    title: '是否确认删除',
    onOk() {
      console.log('OK');
      delSheinType({ id: key }).then(res => {
        getSheinTypeTreeFunc()
      })
    },
    onCancel() {
      console.log('Cancel');
    },
    class: 'test',
  });
}
function onSubmit() {
  updateSheinType({
    name: editName.value,
    id: editId.value
  }).then(res => {
    getSheinTypeTreeFunc()
    showEdit.value = false
  })
}
function onEdit(name, key) {
  editId.value = key
  editName.value = name
  showEdit.value = true
}
function getSheinTypeTreeFunc() {
  getSheinTypeTree({}).then(res => {
    console.log(res);
    res = newNameFunc(res)
    treeData.value = res
    console.log(treeData.value);
  })
}
function newNameFunc(res: any[]) {
  res = res.map(item => {
    item.newName = `${item.name}(${item.enName})`
    if (item.sons && item.sons.length > 0) {
      item.sons = newNameFunc(item.sons)
    }
    return item
  })
  // console.log(res);
  return res
}
function pageInit() {
  getSheinTypeTreeFunc()
  // getBalanceInfo()
  // getUserDetail()
}
pageInit()
</script>

<style scoped lang="less"></style>